<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.picUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 文字分割线 -->
    <div style="text-align: center; margin: 10px 0">商品列表</div>
    <!-- 列表渲染 -->
    <van-grid :column-num="2">
      <van-grid-item
        @click="get_good(item.id)"
        v-for="item in goodsList"
        :key="item.id"
      >
        <img style="width: 100%" :src="item.pic" alt="" />
        <div>{{ item.name }}</div>
        <div class="pir">
          ￥{{ item.minPrice }} <s>￥{{ item.originalPrice }}</s>
          <van-button plain type="primary">购买</van-button>
        </div>
      </van-grid-item>
    </van-grid>
    <div style="margin-top: 10px 0; text-align: center; color: #b6a9a3">
      没有更多了
    </div>
  </div>
</template>

<script>
import { getBanner, getList } from "../api/api";
export default {
  data() {
    return {
      bannerList: [],
      goodsList: [],
    };
  },
  methods: {
    async get_banner_list() {
      let { data } = await getBanner();
      // console.log(data);
      this.bannerList = data;
    },
    async get_list() {
      let { data } = await getList();
      // console.log(data);
      this.goodsList = data.slice(0, 2);
      console.log("list:", this.goodsList);
    },
    get_good(id) {
      this.$router.push({
        path: "/detail",
        query: { id },
      });
    },
  },
  created() {
    this.get_banner_list();
    this.get_list();
  },
};
</script>


<style scoped>
.van-swipe__track > div > img {
  width: 100vw;
  height: 200px;
}
.pir {
  width: 100%;
  padding-top: 10px;
}
.pir button {
  float: right;
  width: 70px;
  height: 26px;
}
</style>